<template>
    <div class="app-container">
        <!-- 头部搜索 -->
        <div class="top-form" style="text-align: center;">
                <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item label="试卷名:">
                    <el-input v-model="queryForm.examName" placeholder="请输入试卷名称"
                    :clearable="true"></el-input>
                </el-form-item>
                <el-form-item label="班级:" prop="classesId" style="padding-left: 30px;">
                    <el-select v-model="queryForm.classesId" placeholder="请选择班级" remote reserve-keyword filterable 
                        clearable>
                        <el-option v-for="item in classesItems" :key="item.id" :value="item.id"
                                    :label="item.classesName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" round  icon="el-icon-search" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 数据展示栏 -->
        <div class="main">
            <el-table :data="tblData"  border style="width: 100%">
                <el-table-column align="center" label="序号" type="index" width="50px"></el-table-column>
                <el-table-column align="center" prop="examName" label="试卷名" width="350px"> </el-table-column>
                <el-table-column align="center" prop="username" label="学生姓名" width="240px"> </el-table-column>
                <el-table-column align="center" prop="classesName" label="班级名" width="180px"> </el-table-column>
                <el-table-column align="center" prop="createTime" label="交卷时间" width="180px"> </el-table-column>
                <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="beforeCorrect(scope.row)" >批改</el-button>
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
                style="textAlign:center;margin-top: 20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryForm.pageIndex"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="queryForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog
            title="试卷批改"
            :visible.sync="dialogVisible"
            width="90%"
            :before-close="handleClose">
            <h3 style="text-align: center;">{{ form.examName}}</h3>
            <h5 style="text-align: center;">考生姓名：{{ form.username}}</h5>
            <div class="question" v-for="item,index in form.answers" :key="item.id" :id="'question-'+index">
                <questionView :answerItem="item" :index="(index+1)+'、'"></questionView>
                <el-divider></el-divider>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="dialogVisible = false" style="margin-right: 15%;">取 消</el-button>
                <el-button type="primary" @click="toCorrect">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import {classesList} from '@/api/classes/classes'
import {pagesList,selectById,correctExam} from '@/api/exam/record'
import questionView from './questionView.vue'
export default {
    components: { questionView },
    name:'ToBeMarkList',
    data(){
        return{
            queryForm:{
                examName:'',
                classesId:null,
                pageIndex:1,
                pageSize:10,
            },
            //班级的集合
            classesItems:[],
            tblData:[],
            total: 0,
            dialogVisible:false,
            form:{
                //试卷记录的ID
                examId:0,
                examName:'',
                answers:[],
                username:''
            }
        }
    },
    mounted(){
        //初始化班级合集
        this.getClassesList("_");
        //初始化试卷
        this.search();
    },
    methods:{
        //进入批改
        beforeCorrect(row){
            this.dialogVisible = true;
            selectById(row.id).then(resp =>{
                this.form.examName = resp.data.examName;
                this.form.answers = resp.data.answers;
                this.form.username = row.username;
                this.form.examId = row.id;
            })
        },
        //弹窗关闭
        handleClose(){
            this.dialogVisible = false;
        },
        //确认批改
        toCorrect(){
            correctExam(this.form).then(resp =>{
                this.$message.success(resp.message)
                this.dialogVisible = false;
            }).catch(error =>{
                this.$message.error('请检查网络设施');
            }).finally(() =>{
                this.search();
            })
        },
        async search(){
            let res = await pagesList(this.queryForm);
            this.tblData = res.data.records;
            this.total = res.data.total;
        },
        //得到班级的合集
        async getClassesList(val){
            let res = await classesList(val);
            this.classesItems = res.data;
        },
        handleSizeChange(val) {
            this.queryForm.pageSize = val;
            this.search();
        },
        handleCurrentChange(val) {
            this.queryForm.pageIndex = val;
            this.search();
        },
    }
}
</script>

<style>

</style>